<script setup>

import {reactive} from "vue";
import {useRouter} from "vue-router";

const {playList, creator} = defineProps(['playList', 'creator']);
let state = reactive({
    trueList: {},
    creator: {},
})

state.trueList = playList
state.creator = creator
// 刷新后数据丢失sessionStorage中拿数据
if (state.trueList?.creator?.length === 0) {
    state.trueList = JSON.parse(sessionStorage.getItem("detailList")).playList
}
const userRouter = useRouter();

function backToHome() {
    userRouter.go(-1);
}

function changeCount(num) {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + "万";
    } else return num;
}
</script>


<template>
    <div class="topBar">
        <img class="bgImg" :src="state.trueList.coverImgUrl" alt=""/>
        <div class="barLeft">
            <svg class="icon" aria-hidden="true" @click="backToHome">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <span>歌单</span>
        </div>
        <div class="barRight">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-danlieliebiao"></use>
            </svg>
        </div>
    </div>
    <div class="TopContent">
        <div class="contentLeft">
            <img :src="state.trueList.coverImgUrl" alt=""/>
            <div class="playCount">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gl-play"></use>
                </svg>
                <span>{{ changeCount(state.trueList.playCount) }}</span>
            </div>
        </div>
        <div class="contentRight">
            <p class="rightListName">{{ state.trueList.name }}</p>
            <div class="rightAuthorInfo">
                <img class="authorPic" :src="state.creator.backgroundUrl" alt=""/>
                <span class="authorName">{{ state.creator.nickname }}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
            <p class="description">
                <span class="info">{{ state.trueList.description }}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </p>
        </div>
    </div>
    <div class="footer">
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiaoxi"></use>
            </svg>
            <span>{{ state.trueList.commentCount }}</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fenxiang1"></use>
            </svg>
            <span>{{ state.trueList.shareCount }}</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiazai1"></use>
            </svg>
            <span>下载</span>
        </div>
        <div class="footerItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-youjiantou"></use>
            </svg>
            <span>多选</span>
        </div>

    </div>
</template>


<style scoped lang="less">
@whiteColor: #F5F5F7;
.topBar {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .barLeft, .barRight {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin: 0 0.2rem;

        span {
            font-size: 0.4rem;
            color: @whiteColor;
        }

        .icon {
            color: @whiteColor;
            fill: @whiteColor;
        }


    }

    .bgImg {
        width: 100%;
        height: 11rem;
        position: fixed;
        z-index: -1;
        filter: blur(30px);
    }
}

.TopContent {
    width: 100%;
    height: 3rem;
    padding: 0.2rem;
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-between;

    .contentLeft {
        width: 36%;
        height: 2.6rem;
        position: relative;

        img {
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 0.2rem;
            position: absolute;
            z-index: -1;
        }

        .playCount {
            position: absolute;
            right: 0.1rem;
            margin-top: 0.1rem;

            .icon {
                width: 0.26rem;
                height: 0.26rem;
                margin-top: -0.04rem;
                margin-right: 0.04rem;
                vertical-align: middle;
                fill: @whiteColor;
            }

            span {
                font-size: 0.26rem;
                color: @whiteColor;
            }
        }
    }

    .contentRight {
        width: 60%;
        height: 2.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .rightListName {
            font-size: 0.3rem;
            font-weight: 900;
            color: @whiteColor;
        }

        .rightAuthorInfo {
            width: 100%;
            height: 0.6rem;
            line-height: 0.6rem;
            color: @whiteColor;

            .authorPic {
                width: 0.6rem;
                height: 0.6rem;
                border-radius: 50%;
                vertical-align: middle;
            }

            .authorName {
                margin-left: 0.1rem;
            }

            .icon {
                width: 0.26rem;
                height: 0.26rem;
                margin-top: -0.08rem;
                vertical-align: middle;
            }
        }

        .description {
            width: 100%;
            height: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .info {
                display: inline-block;
                width: 95%;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 0.24rem;
                color: @whiteColor;
            }

            .icon {
                width: 0.24rem;
                height: 0.24rem;
            }
        }
    }
}

.footer {
    width: 100%;
    height: 1.4rem;
    display: flex;
    justify-content: space-around;
    margin-top: 0.2rem;

    .footerItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: @whiteColor;

        .icon {
            width: 100%;
            height: 46%;
            fill: @whiteColor;
        }

        span {
            margin-top: 0.1rem;
        }
    }
}
</style>